<template>
    <div class="dynamicDetails">
      <el-form ref="dynamicStateFrom" label-width="10%">
        <el-form-item>
          <div class="dialogLine">
            <div class="lineFlex">{{recordInfo.nickName || '小悦老师'}}</div>
            <div class="lineFlex">{{recordInfo.createTime}}</div>
            <div class="lineFlex">
              <div>评论：{{recordInfo.forumComment || 0}}</div>
              <div>点赞：{{recordInfo.forumPraise || 0}}</div>
            </div>
            <!-- 动态详情 -->
            <div class="lineFlex" v-if="dynamicType === 1"> 
              <el-button type="primary" plain v-if="recordInfo.voteType === '1' && recordInfo.matterStick === '0'" @click.stop.prevent="operateStickRecord(recordInfo, '1')">置顶</el-button>
              <el-button type="info" plain v-if="recordInfo.voteType === '1' && recordInfo.matterStick === '1'" @click.stop.prevent="operateStickRecord(recordInfo, '0')">取置</el-button>
              <el-button type="success" plain v-if="recordInfo.voteType === '1' && recordInfo.matterRecommend === '0'" @click.stop.prevent="operateRecommendRecord(recordInfo, '1')">推荐</el-button>
              <el-button type="info" plain v-if="recordInfo.voteType === '1' && recordInfo.matterRecommend === '1'" @click.stop.prevent="operateRecommendRecord(recordInfo, '0')">取荐</el-button>
              <el-button type="warning" plain v-if="recordInfo.voteType === '1' && recordInfo.matterAdopt === '0'" @click.stop.prevent="operateAdoptRecord(recordInfo, '1')">采纳</el-button>
              <el-button type="primary" plain v-if="recordInfo.voteType === '1' && recordInfo.matterAdopt === '1'">已纳</el-button>
              <el-button type="danger" plain @click.stop.prevent="operateDeleteRecord(recordInfo.forumId)">删除</el-button>
            </div>
            <!-- 举报详情 -->
            <div class="lineFlex" v-if="dynamicType === 2">
              <el-button type="danger" plain @click.stop.prevent="operateDeleteRecord(recordInfo.forumId)">删除</el-button>
              <el-button type="info" plain>忽略</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="dialogLine" style="font-size: 16px">{{recordInfo.defaultText}}</div>
        </el-form-item>
        <el-form-item>
          <div class="dialogMultimedia" v-if="recordInfo.defaultImages">
            <viewer :images="JSON.parse(recordInfo.defaultImages)">
              <div class="multimediaCell" v-for="(itemCell, indexCell) in JSON.parse(recordInfo.defaultImages)" :key="'imageCell'+indexCell">
                <img :src="itemCell">
              </div>
            </viewer>
          </div>
          <div class="dialogMultimedia" v-if="recordInfo.defaultVideos">
            <div class="multimediaCell" v-for="(itemCell, indexCell) in JSON.parse(recordInfo.defaultVideos)" :key="'videoCell'+indexCell">
              <video :src="itemCell.url" :poster="itemCell.cover" controls v-if="indexCell === 0"></video>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <commentItem :forumId="forumId" v-if="forumId"></commentItem>
        </el-form-item>
      </el-form>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { examineDynamicFromGather, stickRecordFromGather, adoptRecordFromGather, recommendRecordFromGather, removeRecordFromGather } from '@/config/api'
  import commentItem from '@/components/common/comment.vue'
  export default {
    components: {
        commentItem
    },
    name: 'dynamicDetails',
    props: ['matterId', 'forumId', 'dynamicType'],
    data () {
      return {
        // 记录内容
        recordInfo: []
      }
    },
    watch: {
      // 深度监听
      matterId: {
        handler(val){
          const self = this;
          // 初始化 动态详情界面
          self.initDynamicDetailsInterface()
        },
        deep:true
      },
    },
    mounted (){
      const self = this;
      // 初始化 动态详情界面
      self.initDynamicDetailsInterface()
    },
    methods: {
      // 初始化 动态详情界面
      initDynamicDetailsInterface() {
        const self = this;
        // 获取 动态记录详情
        self.obtainDynamicRecordDetails()
      },
      // 获取 动态记录详情
      async obtainDynamicRecordDetails() {
        const self = this;
        const recordInfo = await examineDynamicFromGather(self.matterId)
        console.log(recordInfo, '获取 动态记录详情')
        if (recordInfo.status === 200) {
          // 记录内容
          self.recordInfo = recordInfo.data
        }
      },
      // 操作·删除推荐记录
      operateDeleteRecord(forumId) {
        const self = this;
        self.$confirm('删除后不可恢复，请谨慎删除贴子', '确定删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          const removeRecommendState = await removeRecordFromGather(forumId)
          console.log(removeRecommendState, '...removeRecommendState')
          if (removeRecommendState.status === 200) {
            // // 获取 集合中的动态记录
            // self.obtainDynamicFromGather()
          } else {
            self.$message({
              type: 'info',
              message: '删除失败'
            });
          }
        }).catch(() => {});
      },
      // 操作·置顶记录
      async operateStickRecord(item, matterStick) {
        const self = this;
        const stickRecommendState = await stickRecordFromGather(item.matterId, matterStick)
        if (stickRecommendState.status === 200) {
            Vue.set(item, 'matterStick', matterStick)
          } else {
            self.$message({
              type: 'info',
              message: '置顶失败'
            });
          }
      },
      // 操作·采纳记录
      operateAdoptRecord(item, matterAdopt) {
        const self = this;
        self.$confirm('采纳后不可更改，请谨慎采纳贴子', '确定采纳', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(async() => {
          const adoptRecommendState = await adoptRecordFromGather(item.matterId, matterAdopt)
          if (adoptRecommendState.status === 200) {
            Vue.set(item, 'matterAdopt', matterAdopt)
          } else {
            self.$message({
              type: 'info',
              message: '采纳失败'
            });
          }
        }).catch(() => {});
      },
      // 操作·推荐记录
      async operateRecommendRecord(item, matterRecommend) {
        const self = this;
        const recommendRecommendState = await recommendRecordFromGather(item.matterId, matterRecommend)
        if (recommendRecommendState.status === 200) {
          Vue.set(item, 'matterRecommend', matterRecommend)
        } else {
          self.$message({
            type: 'info',
            message: '采纳失败'
          });
        }
      },
    },
  }
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
  @import 'dynamicDetails.less';
</style>
